

<template>
<el-row>
  <el-col :span="4">
    <el-tree
        style="max-width: 600px"
        :data="cats"
        :props="defaultProps"
        @node-click="handleNodeClick"
    />
  </el-col>
  <el-col :span="20">
    <!-- 搜索栏部分开始 -->
    <el-row style="margin-top: 10px;">
      <el-col :span="24">
        <!-- model 绑定表单数据 -->
        <el-form :inline="true" :model="queryContent" class="demo-form-inline">
          <el-form-item label="文本1">
            <el-input v-model="queryContent.text1" placeholder="文本1"/>
          </el-form-item>
          <el-form-item label="文本2">
            <el-input v-model="queryContent.text2" placeholder="文本2"/>
          </el-form-item>
          <el-form-item label="状态">
            <el-select
                style="width: 100px"
                v-model="queryContent.status"
                placeholder="选择状态"
            >
              <el-option value="0" :selected="true" label="全部"/>
              <el-option value="1" label="正常"/>
              <el-option value="2" label="废弃"/>
              <el-option value="99" label="删除"/>
            </el-select>
          </el-form-item>

          <el-form-item>
            <el-button type="primary" @click="loadContent">搜索</el-button>
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>
    <!-- 搜索栏部分结束 -->

    <!-- 工具栏部分开始 -->
    <el-row style="margin-top: 10px;">
      <el-col :span="24">
        <el-tooltip
            class="box-item"
            effect="dark"
            content="新增内容"
            placement="top-start"
        >
          <el-button @click="showAddContentWin" type="primary">
            <el-icon>
              <Plus/>
            </el-icon>
          </el-button>
        </el-tooltip>
        <el-button @click="editBtnHandler" :disabled="editBtnDisabled" type="primary">
          <el-icon>
            <EditPen/>
          </el-icon>
        </el-button>
        <el-popconfirm confirm-button-text="是" cancel-button-text="否"
                       @confirm="deleteBtnHandler" title="您确定要删除选中的典信息吗？">
          <template #reference>
            <el-button :disabled="deleteBtnDisabled" type="primary">
              <el-icon>
                <Minus/>
              </el-icon>
            </el-button>
          </template>
        </el-popconfirm>
      </el-col>
    </el-row>
    <el-table ref="cotnentTable" :data="contents">
      <el-table-column type="selection" width="55"/>
      <el-table-column prop="contentId" label="#"/>
      <el-table-column prop="text1" label="文本1"/>
      <el-table-column prop="text2" label="文本1"/>
      <el-table-column prop="text3" label="文本1"/>
      <el-table-column prop="url" label="文本1"/>
      <el-table-column prop="img1" label="图片1">
        <template #default="scope">
          <el-image style="width: 100px; height: 100px" :src="scope.row.img1" :fit="fit" />
        </template>
      </el-table-column>
      <el-table-column prop="img1" label="图片2">
        <template #default="scope">
          <el-image style="width: 100px; height: 100px" :src="scope.row.img2" :fit="fit" />
        </template>
      </el-table-column>
      <el-table-column prop="dictStatus" label="状态">
        <template #default="scope">
          <el-tag type="success" v-if="scope.row.status == 1">正常</el-tag>
          <el-tag type="warning" v-else-if="scope.row.status == 2">废弃</el-tag>
          <el-tag type="danger" v-else>删除</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="createTime" label="创建时间"/>
      <!-- 行工具栏 -->
      <el-table-column width="140" label="操作">
        <template #default="scope">
          <el-button type="primary" @click="toEditDict(scope.row.dictId)" size="small">编辑</el-button>
          <el-popconfirm confirm-button-text="是" cancel-button-text="否"
                         @confirm="deleteDict(scope.row.dictId)" title="您确定要删除这个字典信息吗？">
            <template #reference>
              <el-button type="danger" size="small">删除</el-button>
            </template>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页部分开始 -->
    <el-row style="margin-top: 10px;">
      <el-col :span="24">
        <el-pagination background @change="pageChange" layout="prev, pager, next" v-bind:page-size="limit"
                       :total="total"/>
      </el-col>
    </el-row>
    <!-- 分页部分结束 -->
  </el-col>
</el-row>
  <!-- 列表部分结束 -->

  <!-- 新增内容窗体开始 -->
  <el-dialog title="新增内容" style="max-width: 700px" v-model="addContent.addContentWinVisible">
    <el-form :model="addContent.content" label-width="auto" style="max-width: 600px">
      <el-form-item label="选择类型">
        <el-button @click="this.addContent.chooseCatWinVisible = true">类型</el-button><el-tag>{{addContent.category.catName}}</el-tag>
      </el-form-item>
      <el-form-item label="文本1">
        <el-input  v-model="addContent.content.text1" />
      </el-form-item>
      <el-form-item label="文本2">
        <el-input  v-model="addContent.content.text2" />
      </el-form-item>
      <el-form-item label="文本3">
        <el-input  v-model="addContent.content.text3" />
      </el-form-item>
      <el-form-item label="超链接">
        <el-input  v-model="addContent.content.url" />
      </el-form-item>
      <el-form-item label="图片1">
        <el-upload
            class="avatar-uploader"
            :action="imageUpLoadUrl"
            name="file"
            :show-file-list="false"
            :on-success="handleAvatarSuccess1"
        >
          <img v-if="imageUrl1" :src="imageUrl1" class="avatar" />
          <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
        </el-upload>
      </el-form-item>
      <el-form-item label="图片2">
        <el-upload
            class="avatar-uploader"
            :action="imageUpLoadUrl"
            name="file"
            :show-file-list="false"
            :on-success="handleAvatarSuccess2"
        >
          <img v-if="imageUrl2" :src="imageUrl2" class="avatar" />
          <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
        </el-upload>
      </el-form-item>
    </el-form>
    <!-- 显示选择内容类型的弹窗 开始 -->
    <el-dialog title="内容类型" style="max-width: 300px" v-model="addContent.chooseCatWinVisible">
      <el-tree
          :data="cats"
          :props="defaultProps"
          @node-click="chooseCat"
      />
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="this.addContent.chooseCatWinVisible = false">
            关闭
          </el-button>
        </div>
      </template>
    </el-dialog>
    <!-- 显示选择内容类型的弹窗 结束 -->

    <template #footer>
      <div class="dialog-footer">
        <el-button @click="closeAddContentWin">取消</el-button>
        <el-button type="primary" @click="addContentSubmit">
          提交
        </el-button>
      </div>
    </template>
  </el-dialog>
  <!-- 新增内容窗体结束 -->

</template>
<script>
import categoryRequest from '../../api/ content-category.js';
import config from '../../util/config.js';
import contentRequest from '../../api/content.js';

export default {
  data(){
    return{
      cats:[],
      contents:[],//内容列表
      queryContent:{},//
      currentCat: undefined,// 当前选中的类型对象
      currentPage:1,// 当前页码
      limit:10,// 每页显示的记录数
      total:0,// 总记录数
      defaultProps: { // 设置属性的对应关系
        label: 'catName',
        children: 'children'
      },
      // 新增内容相关属性
      addContent:{
        addContentWinVisible:false,// 新增内容弹窗标志
        content:{},// 封装新增内容对象
        category:{},// 选择的内容类型对象
        chooseCatWinVisible:false,// 选择内容类型的弹窗标志
      },
      imageUpLoadUrl: config.baseUrl + "/cms/upload/image",// 图片上传的url
      imageUrl2:undefined, // 图片2
      imageUrl1:undefined, // 图片1



    }
  },
  methods:{
    /**
     * 翻页事件
     * @param value
     */
    pageChange(value){
      this.currentPage = value;
      this.loadContent();
    },
    /**
     * 加载所有的内容
     */
    loadContent(){
      // 组织查询条件
      this.queryContent.page = this.currentPage;
      this.queryContent.limit = this.limit;
      if(this.currentCat){
        this.queryContent.catId = this.currentCat.catId;
      }
      // 查询
      contentRequest.listPage(this.queryContent,res=>{
        this.contents = res.data.records;
        this.total = res.data.total;
      })
    },

    /**
     * 内容类型树节点的单击事件
     */
    handleNodeClick(cat){
      // 记录选中的节点数据
      this.currentCat = cat;
      // 加载内容
      this.loadContent();
    },
    /**
     * 新增内容提交事件
     */
    addContentSubmit(){
      // 组织数据
      this.addContent.content.catId = this.addContent.category.catId;
      this.addContent.content.img1 = this.imageUrl1;
      this.addContent.content.img2 = this.imageUrl2;
      // 提交数据
      contentRequest.save(this.addContent.content,res=>{
        if(res.code == 200){
          this.$message({
            message: '新增内容成功',
            type: 'success'
          });
          // 关闭窗体
          this.closeAddContentWin();
          // 刷新列表
          this.loadData();
        }else{
          this.$message({
            message: '新增内容失败',
            type: 'error'
          });
        }
      });
    },
    /**
     * 关闭新增内容的弹窗
     */
    closeAddContentWin(){
      // 数据还原
      this.addContent= {
        addContentWinVisible:false,// 新增内容弹窗标志
        content:{},// 封装新增内容对象
        category:{},// 选择的内容类型对象
        chooseCatWinVisible:false,// 选择内容类型的弹窗标志
      }
      this.imageUrl2 = undefined;
      this.imageUrl1 = undefined;
    },
    /**
     * 图片上传成功的回调函数
     * @param res
     */
    handleAvatarSuccess1(res){
      if(res.code == '200'){
        this.imageUrl1 = res.data;
      }
    },
    /**
     * 图片上传成功的回调函数
     * @param res
     */
    handleAvatarSuccess2(res){
      if(res.code == '200'){
        this.imageUrl2 = res.data;
      }
    },
    /**
     * 选择内容类型的节点单击事件
     */
    chooseCat(cat){
      console.log(cat)
      // 判断是否选怎了叶子节点
      if(cat.parent == 0){
        // 将选择的内容类型赋值给addContent.category
        this.addContent.category = cat;
        // 关闭选择内容类型的弹窗
        this.addContent.chooseCatWinVisible = false;
      }
    },
    /**
     * 弹出新增内容的窗体
     */
    showAddContentWin(){
      this.addContent.addContentWinVisible = true;
    },
    /**
     * 加载所有的内容类型
     */
    loadData() {
      categoryRequest.getCategory(res => {
        this.cats = res.data;
      });
    }
  },mounted() {
    this.loadData();
    this.loadContent();
  }
}
</script>
<style scoped>
.avatar-uploader .avatar {
  width: 100px;
  height: 100px;
  display: block;
}
</style>

<style>
 .avatar-uploader .el-upload {
   border: 1px dashed var(--el-border-color);
   border-radius: 6px;
   cursor: pointer;
   position: relative;
   overflow: hidden;
   transition: var(--el-transition-duration-fast);
 }

.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 100px;
  height: 100px;
  text-align: center;
}
</style>